<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TCP/UDP测试服务管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">TCP/UDP测试服务管理</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <button class="btn btn-outline-light" id="logoutBtn">
                            <i class="bi bi-box-arrow-right"></i> 退出
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-3">
        <div class="row">
            <!-- 左侧服务器列表 -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">服务列表</h5>
                        <button class="btn btn-sm btn-primary" id="addServerBtn">
                            <i class="bi bi-plus-lg"></i> 添加服务
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush" id="serverList">
                            <!-- 服务器列表将通过JS动态加载 -->
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 右侧内容区域 -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" id="serverTabs">
                            <li class="nav-item">
                                <a class="nav-link active" id="welcome-tab" data-bs-toggle="tab" href="#welcome">欢迎</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="serverTabContent">
                            <div class="tab-pane fade show active" id="welcome">
                                <h4>欢迎使用TCP/UDP测试服务管理系统</h4>
                                <p>请从左侧选择一个服务或创建新服务</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑服务器模态框 -->
    <div class="modal fade" id="serverModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="serverModalTitle">添加服务</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="serverForm">
                        <input type="hidden" id="serverId">
                        <div class="mb-3">
                            <label for="serverName" class="form-label">服务名称</label>
                            <input type="text" class="form-control" id="serverName" required>
                        </div>
                        <div class="mb-3">
                            <label for="serverType" class="form-label">服务类型</label>
                            <select class="form-select" id="serverType" required>
                                <option value="TCP">TCP</option>
                                <option value="UDP">UDP</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="serverPort" class="form-label">端口</label>
                            <input type="number" class="form-control" id="serverPort" min="1" max="65535" required>
                        </div>
                        <div class="mb-3">
                            <label for="responseMode" class="form-label">响应模式</label>
                            <select class="form-select" id="responseMode" required>
                                <option value="MANUAL">手动响应</option>
                                <option value="AUTO">自动响应</option>
                                <option value="ECHO">回显</option>
                            </select>
                        </div>
                        <div class="mb-3" id="responseContentGroup">
                            <label for="responseContent" class="form-label">自动响应内容</label>
                            <textarea class="form-control" id="responseContent" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveServerBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>